<template>
	<view class="order-content">
		<u-sticky bgColor="#fff">
			<u-tabs :list="screenWfActivityOrder" :scrollable="false" lineColor="#f56c6c"
				:activeStyle="{ color: '#f56c6c', fontWeight: 'bold', transform: 'scale(1.05)'}"
				@click="tabWfActivityOrder" :current="orderCurrent"></u-tabs>
		</u-sticky>
		<!-- @click="$u.throttle(tabWfActivityOrder, 800)" -->
		<!-- @click="tabWfActivityOrder" -->
		<view class="order-list-box">
			<view class="order-list-item" v-for="item in listData" :key="item.id">
				<view class="order-list-title u-flex u-flex-between">
					<!-- http://qianxueapplet.suoeryun.com/world_benefits_user/dingdanmeituan.png -->
					<!-- u-flex-items-center -->
					<view class="title-left u-flex u-flex-items-center">
						<image class="title-left-img" :src="classListTypeBg(item.platform)"></image>
						<view class="title-shopname">{{item.shopName}}</view>
					</view>
					<text class="list-title-label" v-if="item.orderStatus === '2'">{{item.orderStatus_dictText}}
						<text v-if="item.platformAuditStatus === '3'">({{item.platformAuditStatus_dictText}})</text>
					</text>
					<text class="list-title-label" v-else-if="item.orderStatus === '3'">
						{{item.orderStatus_dictText}}
						<text v-if="item.merchantAuditStatus === '3'">({{item.merchantAuditStatus_dictText}})</text>
					</text>
					<text class="list-title-label" v-else>{{item.orderStatus_dictText}}</text>
				</view>
				<view class="u-flex order-list-details">
					<view class="details-img-con">
						<image :src="item.shopLogo" class="details-img" mode="aspectFill"></image>
					</view>
					<view class="u-flex u-flex-column details-desc">
						<view class="desc-cont">活动平台：{{item.platform_dictText}}</view>
						<view class="u-flex desc-cont">
							<view class="desc-cont-label label-1">
								满{{item.returnThreshold}}返{{item.fullRefund}}
							</view>
							<view class="desc-cont-label label-2">
								{{item.completeRequire_dictText}}
							</view>
						</view>
						<view class="desc-cont">报名时间：{{item.registrationTime}}</view>
					</view>
				</view>
				<view class="u-flex u-flex-between u-flex-items-center details-desc-handle" :class="item.orderMainStatus === '1' ? 'm-b-20' : ''">
					<view v-if="item.orderMainStatus === '1'" class="u-flex u-flex-items-center desc-handle-left"
						@tap="toShopOrder(item)">
						进店下单
						<u-icon name="arrow-right" color="#000" size="40rpx"></u-icon>
					</view>
					<view class="u-flex desc-handle-right" v-if="['0','1','2','3'].includes(item.orderStatus)">
						<view style="padding-right: 10rpx;" v-if="['0','1'].includes(item.orderStatus)">
							<u-button type="primary" hairline="false" shape="circle" size="small" text="取消订单"
								color="#FF5151" plain @tap="handleCancelOrder(item)"></u-button>
						</view>
						<u-button type="primary" hairline="false" shape="circle" size="small"
							:text="orderStatusBtnText(item)" color="#FF5151" @tap="toOrderPlace(item)"></u-button>
					</view>
				</view>
				<view class="order-list-footer"
					v-if="['0','1'].includes(item.orderStatus) || item.platformAuditStatus=== '3' || item.merchantAuditStatus === '3'">
					<text v-if="item.orderStatus === '0'">请在<text
							class="list-footer-time">{{item.expirationTime}}</text>前上传订单号，超时自动取消</text>
					<text v-if="item.orderStatus === '1'">请在<text
							class="list-footer-time">{{item.uploadExpirationTime}}</text>前上传凭证，超时自动取消</text>
					<!-- <text v-if="item.platformAuditStatus === '3' || ">未通过原因：{{item.cause}}</text> -->
					<text
						v-if=" item.platformAuditStatus === '3' || item.merchantAuditStatus === '3'">未通过原因：{{item.cause}}</text>
				</view>
			</view>

			<u-empty marginTop="100rpx" v-if="!listData.length" :icon="getimageUrl('empty-order.png')"></u-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, unref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { wfActivityOrderList, cancelOrder } from '@/common/order.api';
	import { getimageUrl } from '@/util/util.js';
	let screenWfActivityOrder = ref([
		{
			id: "1",
			name: '进行中'
		}, {
			id: "2",
			name: '已完成',
		}, {
			id: "3",
			name: '已取消',
		}
	])
	const orderCurrent = ref(0)

	function orderStatusBtnText(order) {
		var genderMap = {
			'0': '上传订单号',
			'1': '上传凭证',
			'2': order.platformAuditStatus === '3' ? '重新提交' : '重新补充',
			'3': order.merchantAuditStatus === '3' ? '重新提交' : '重新补充'
		};
		return genderMap[order.orderStatus]
	}


	const state = reactive({
		filtrate: {
			pageNo: 1,
			pageSize: 10,
			orderMainStatus: 1
		},
		loadStatus: 'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
		isLoadMore: false,  //是否加载中
	})

	let listData = ref([])

	async function getList() {
		const result = await wfActivityOrderList(state.filtrate)
		if (result.records.length !== 0) {
			listData.value = listData.value.concat(result.records)
			if (listData.value.length === result.total) {
				state.isLoadMore = true
				state.loadStatus = 'nomore'
			} else {
				state.isLoadMore = false
			}
		} else {
			state.isLoadMore = true
			state.loadStatus = 'nomore'
		}
	}

	//上拉触底函数
	onReachBottom(() => {
		if (!state.isLoadMore) {  //此处进行判断上锁，防止重复请求
			state.isLoadMore = true
			state.filtrate.pageNo += 1//页数加1
			getList()
		}
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		//重新触发获取数据方法，刷新接口
		listData.value = []
		state.filtrate.pageNo = 1
		listInit()
		//结束刷新
		uni.stopPullDownRefresh()
	})

	// 筛选订单
	async function tabWfActivityOrder(item) {
		orderCurrent.value = item.index
		listData.value = []
		state.filtrate.pageNo = 1
		state.filtrate.orderMainStatus = item.id
		listInit()
		// uni.$u.throttle(, 1000)
	}

	function toOrderPlace(item) {
		uni.navigateTo({
			url: `/pages/orderPlace/orderPlace?id=${item.id}`
		});
	}

	async function handleCancelOrder(item) {

		uni.showModal({
			title: '提示',
			content: '确认取消订单?',
			success: async function (res) {
				if (res.confirm) {
					await cancelOrder({ id: item.id })
					await listInit()
				}
			}
		});
	}

	async function listInit() {
		state.filtrate.pageNo = 1
		listData.value = []
		getList()
	}

	onShow(() => {
		orderCurrent.value = 0
		listInit()
	})
	// http://qianxueapplet.suoeryun.com/world_benefits_user/dingdanmeituan.png
	function classListTypeBg(type) {
		var genderMap = {
			'elm': getimageUrl('dingdaneleme.png'),
			'mt': getimageUrl('dingdanmeituan.png'),
			'dy': getimageUrl('dingdandouyin.png'),
		};
		return genderMap[type]
	}

	async function toShopOrder(item) {
		// uni.$emit('update')
		uni.setClipboardData({
			data: item.shopName,
			// success: function () {
			// 	console.log('success');
			// }
			showToast: false
		});
		if (item.platform === 'elm') {
			uni.navigateToMiniProgram({
				appId: 'wxece3a9a4c82f58c9',
				path: 'ele-search/pages/search/search',
				// success(res) {
				// }
			})
			// return
		}
		// 测试 打开小程序
		if (item.platform === 'mt') {
			uni.navigateToMiniProgram({
				appId: 'wx2c348cf579062e56',
				path: 'packages/index/search/search',
				// success(res) {
				// }
			})
			// return
		}

	}
</script>

<style lang="scss" scoped>
	.order-content {
		// background: #F2F2F2;

		.order-list-box {
			margin-top: 20rpx;

			.order-list-item {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 0 20rpx 20rpx 20rpx;
				padding: 20rpx;

				.order-list-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					padding-bottom: 12rpx;
					border-bottom: 1rpx solid #D8D8D855;

					.title-shopname {
						padding-left: 10rpx;
						width: 310rpx;
						white-space: nowrap; //文本不会换行
						text-overflow: ellipsis; //文本溢出显示省略号
						overflow: hidden; //超出容器的文本自动选择scroll或visible进行处理
					}

					.title-left {
						.title-left-img {
							width: 44rpx;
							height: 44rpx;
						}
					}

					.list-title-label {
						color: #FA682C;
					}
				}

				.order-list-details {
					margin-top: 10rpx;

					.details-img-con {
						width: 30%;
						height: 200rpx;
						padding-right: 20rpx;
						margin-top: 10rpx;

						.details-img {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}

					.details-desc {
						width: calc(100% - (30% + 20rpx));
						font-weight: 400;
						font-size: 30rpx;
						justify-content: space-evenly;

						.desc-cont {
							color: #333333;
						}

						.desc-cont-label {
							border-radius: 10rpx;
							border: 1rpx solid #FF5046;
							padding: 2rpx 20rpx;
							font-size: 26rpx;
							font-weight: 500;
						}

						.label-1 {
							color: #E03D3C;
							margin-right: 10rpx;
						}

						.label-2 {
							color: #fff;
							background: #FF5046;
							opacity: 1;
						}
					}
				}

				.details-desc-handle {
					margin-top: 10rpx;
					// margin: 15rpx 0;
					// padding-bottom: 10rpx;
					// border-bottom: 1px solid #D8D8D855;

					.desc-handle-left {
						font-size: 32rpx;
						font-weight: 500;
						// position: relative;

						// .details-desc-icon{
						// 	position: relative;
						// 	// position: absolute;
						// 	top: 100rpx;
						// }
					}
				}

				.order-list-footer {
					padding-top: 10rpx;
					border-top: 1px solid #D8D8D855;
					font-weight: 400;
					color: #666666;
					font-size: 26rpx;

					.list-footer-time {
						color: #FF5046
					}
				}
			}
		}

	}
</style>